<template>
  <div class="demo">
    <div class="demo-title">RadioGroup 垂直</div>
    <div class="demo-content">
      <Radio.Group v-model:value="value">
        <Radio :style="radioStyle" :value="1">Option A</Radio>
        <Radio :style="radioStyle" :value="2">Option B</Radio>
        <Radio :style="radioStyle" :value="3">Option C</Radio>
        <Radio :style="radioStyle" :value="4">
          More...
          <Input v-if="value === 4" style="width: 100px; margin-left: 10px" />
        </Radio>
      </Radio.Group>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import Input from '@sscd/input';
  import Radio from '@sscd/radio';
  const value = ref<number>(1);
  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });
</script>
